<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="mui/mui.min.css">
    <link rel="stylesheet" href="mui/mui.picker.min.css">
    <link rel="stylesheet" href="mui/mui.showLoading.css">
    <link rel="stylesheet" href="css/instructions.css?20180820">
    <script src="js/flexible.js"></script>
    <title>领取说明</title>
    <style>
        [v-cloak] {
            visibility: hidden !important;
        }
    </style>
</head>

<body>
    <div id="app" class="app" v-cloak>
        <div class="content" v-if="xmessge">
            <div>
                <div class="picker_message">
                    <div class="message_top">
                        <div class="img">
                            <img :src='prize_url+"?20180821"' alt="">
                        </div>
                        <div class="text">
                            <div class="text_name">{{prize_name}}</div>
                            <div class="text_data">{{"至"+end_date+"到期"}}</div>
                        </div>
                    </div>
                    <div class="message_bottom">
                        <div class="bg">
                            <div class="left">兑换码：</div>
                            <input type="text" v-model='codeNum' id="codeNum" readonly>
                            <button class="right" type="button" data-clipboard-text="">复制</button>
                        </div>
                    </div>
                    <div class="tishi">请截图保留兑换码 以免遗失</div>
                </div>
            </div>
            <div class="my_message" v-html='message'>
            </div>
        </div>
        <div class="foot">
            <ul>
                <li @click="share(true,0)">
                    <div class="title">
                        <img src="img/share1.png" alt="">
                    </div>
                    <div class="text share1">分享在抽奖</div>
                </li>
                <li @click="share(true,1)">
                    <div class="title">
                        <img src="img/wx1.png" alt="">
                    </div>
                    <div class="text ">关注长荣
                        <br/>微信公众号</div>
                </li>
                <li @click="jump('https://weibo.com/u/3483881701?refer_flag=1005055014_&is_hot=1')">
                    <div class="title">
                        <img src="img/xl1.png" alt="">
                    </div>
                    <div class="text">关注长荣
                        <br/>新浪微博</div>
                </li>
                <li @click="jump('http://www.ipeen.com.tw')">
                    <div class="title">
                        <img src="img/ipeen.png" alt="">
                    </div>
                    <div class="text ipeen">台湾热搜</div>
                </li>
            </ul>
        </div>
        <div class="dialog" v-if="dialog" v-cloak>
            <div class="img">
                <div class="close" @click="share(false,2)">
                    <img src="img/close.png" alt="">
                </div>
                <img :src='shareImg' alt="">
                <p>请保存图片到系统相册，通知给好友一起抽奖吧</p>
            </div>
        </div>
    </div>
    <script src="mui/mui.min.js"></script>
    <script src="mui/mui.showLoading.js"></script>
    <script src="mui/mui.picker.min.js"></script>
    <script src="mui/province.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/config.js"></script>
</body>
<script>
    var url = appconfig.apiUrl;
    let vm = new Vue({
        el: "#app",
        data: {
            isMessage: false,
            smessage: false,
            xmessge: false,
            prize_num: "",
            prize_name: "",
            prize_url: "",
            codeNum: "",
            message: "",
            theRequest: "",
            end_date: "",
            dialog: false,
            shareImg: 'img/share.png'
        },
        created() {
            var that = this;
            var clipboard = new ClipboardJS('.right', {
                text: function (trigger) {
                    return that.codeNum;
                }
            });
            clipboard.on('success', function (e) {
                mui.toast("复制成功", " ");
                e.clearSelection();
            });
            clipboard.on('error', function (e) {
                mui.toast("复制失败", " ");
            });
        },
        methods: {
            geUrl: function () {
                var theRequest = {};
                var url = decodeURIComponent(location.search); //获取url中"?"符后的字串
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            },
            jump(val) {
                window.location.href = val;
            },
            copyText() {
                var e = document.getElementById("codeNum");//获取textarea的id
                e.select(); //选择textarea的文本内容
                document.execCommand("Copy"); //执行浏览器复制命令
            },
            share(val, type) {
                var elm = document.getElementById('app');
                if (type == '0') {
                    this.shareImg = 'img/share1.jpg?20180822';
                    elm.style.overflow = 'hidden';
                } else if (type == "1") {
                    this.shareImg = 'img/share_w.png?20180822';
                    elm.style.overflow = 'hidden';
                } else {
                    elm.style.overflow = 'scroll';
                }
                this.dialog = val;
            },
            imgUrlf() {
                var pirzeMessage = JSON.parse(localStorage.getItem('pirzeMessage'));
                if (pirzeMessage !== null) {
                    var luck_draw_item_info = pirzeMessage.luck_draw_item_info;
                    var luck_draw_prize_info = pirzeMessage.luck_draw_record_info;
                    console.log(luck_draw_item_info);
                    console.log(luck_draw_prize_info);
                }
                this.prize_url = luck_draw_item_info.prize_url;
                this.prize_name = luck_draw_item_info.name;
                this.type = luck_draw_item_info.type;
                this.smessage = false;
                this.xmessge = true;
                this.codeNum = luck_draw_prize_info.cashing_code;
                this.message = luck_draw_item_info.wxplain;
                this.end_date = luck_draw_item_info.end_date;
            },
            close() {
                this.isMessage = false;
            }
        },
        mounted() {
            this.theRequest = this.geUrl();
            this.imgUrlf();
        }
    })
</script>

</html>